<script setup lang="ts">
import {onLoad, onShow} from "@dcloudio/uni-app";
import {computed, getCurrentInstance, ref} from "vue";
import type {Book, BookArea, CreateRecordReqVO, DeskType} from "@/interfaces/book";
import Desk from "@/components/desk/Desk.vue";
import {useStore} from "vuex";
import {useCreateRecordApi, useSeatStatusApi} from "@/services/api";
import {SeatStatusReqVO} from "@/interfaces/book";


const store = useStore()
const deskCount = ref<number>()
const showConfirm = ref<boolean>(false)
const onChoose = (seat: number[]) => {
  createRecordReq.value.deskNum = seat[0]
  createRecordReq.value.seatNum = seat[1]
  showConfirm.value = true
}
const userId = computed(():string=>store.getters["auth/getUserId"])
const seatStatus = ref<number[]>([])
const createRecordReq = ref<CreateRecordReqVO>({
  areaId: 0,
  bookDate: "",
  bookTimes: [],
  deskNum: 0,
  seatNum: 0,
  userId: '',
})
const seatStatusReq = ref<SeatStatusReqVO>({
  areaId: 0,
  bookDate: "",
  bookTimes: []
})
const onConfirm = async () => {
  try {
    await useCreateRecordApi(createRecordReq.value)
    showConfirm.value = false
    store.getters["auth/getUToast"]({
      type: 'default',
      title: '默认主题',
      message: '预约成功',
    })
    setTimeout(async ()=>{
      await uni.redirectTo({
        url:'/pages/index/index'
      })
    },1900)

  }finally {
    showConfirm.value = false
  }
}
const count = (list:string[][]):number[] =>{
  if(list.length === 3) {
    return list[0].map((value:string,index:number) => parseInt(value) & parseInt(list[1][index]) & parseInt(list[2][index]))
  }
  if(list.length === 2) return list[0].map((value:string,index:number) => parseInt(value) & parseInt(list[1][index]))
  return list[0].map(value => parseInt(value))
}
const init = async ()=>{
  const {data: res} = await useSeatStatusApi(seatStatusReq.value);
  seatStatus.value = count(res.map((value: string):string[] => value.split('')))
}

onShow(()=>{
  const {refs} = getCurrentInstance()
  store.dispatch("auth/setUToast", refs.uToast.show)
  init()
})
onLoad((e) => {
  const {area,timeList,date}:Book = JSON.parse(e?.data)
  createRecordReq.value.userId = userId.value
  createRecordReq.value.areaId = area.id
  deskCount.value = parseInt(area.deskCount.toString())
  createRecordReq.value.bookTimes = timeList
  createRecordReq.value.bookDate = date.date
  seatStatusReq.value.areaId = area.id
  seatStatusReq.value.bookTimes = timeList
  seatStatusReq.value.bookDate = date.date
})
</script>

<template>
  <view class="container">
    <u-toast ref="uToast"></u-toast>
    <view class="title">
      请选择座位
    </view>
    <u-grid
        :border="false"
        col="2"
    >
      <u-grid-item
          v-for="(desk,index) in deskCount"
          :key="index"
      >
        <desk class="desk" :seat-status="seatStatus" :desk-num="index+1" @choose="onChoose"></desk>
      </u-grid-item>
    </u-grid>
    <u-modal
        :show="showConfirm"
        :showCancelButton="true"
        @confirm="onConfirm"
        @cancel="showConfirm = false"
        :asyncClose="true"
    >
      <view>
        是否确定预约该座位？
      </view>
    </u-modal>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title{
    color: #dd524d;
    font-weight: bold;
    font-size: 36rpx;
    padding: 24rpx;
  }
  .desk {
    padding: 24rpx;
    width: 250rpx;
    height: 250rpx;
  }
}
</style>